<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
    <style>


/*      实例解析：
            #navlist{position:relative;} - 位置设置相对定位，让里面的绝对定位
            #navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;} - margin和padding设置为0，列表样式被删除，所有列表项是绝对定位
            #navlist li, #navlist a{height:44px;display:block;} - 所有图像的高度是44px
        现在开始每个具体部分的定位和样式：
            #home{left:0px;width:46px;} - 定位到最左边的方式，以及图像的宽度是46px
            #home{background:url(img_navsprites.gif) 0 0;} - 定义背景图像和它的位置（左0px，顶部0px）
            #prev{left:63px;width:43px;} - 右侧定位63px（＃home宽46px+项目之间的一些多余的空间），宽度为43px。
            #prev{background:url('img_navsprites.gif') -47px 0;} - 定义背景图像右侧47px（＃home宽46px+分隔线的1px）
            #next{left:129px;width:43px;}- 右边定位129px(#prev 63px + #prev宽是43px + 剩余的空间), 宽度是43px.
            #next{background:url('img_navsprites.gif') no-repeat -91px 0;} - 定义背景图像右边91px（＃home 46px+1px的分割线+＃prev宽43px+1px的分隔线）
        */


        #navlist{position:relative;}
        #navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;}
        #navlist li, #navlist a{height:44px;display:block;}

        #home{left:0px;width:46px;}
        #home{background:url('img_navsprites.gif') 0 0;}

        #prev{left:63px;width:43px;}
        #prev{background:url('img_navsprites.gif') -47px 0;}

        #next{left:129px;width:43px;}
        #next{background:url('img_navsprites.gif') -91px 0;}
    </style>
</head>

<body>
<ul id="navlist">
    <li id="home"><a href="/"></a></li>
    <li id="prev"><a href="/css/"></a></li>
    <li id="next"><a href="/css/"></a></li>
</ul>
</body>
</html>